<template>
	<eui-page-frame topHeight="260">
		<template #top>
			<view class="content-img">
				<eui-navbar ref="EuiNavBar" title="采购费用方案维护" color="#000000" backgroundColor="#FFFFFF"
					 :option="nbOption" @menuFunc="onClickMenuFunc"
					>
				</eui-navbar>
				<view class="top-view">
					<eui-search-bar ref="RdsSearchBar" leftIcon="icon-sousuo" v-model="searchText" placeholder="请输入费用编码"
						@confirm="searchConfirm" @leftIconClick="scanCode" radius="30" showFilter="true">
						<template v-slot:searchFields>
							<view class="search-fields">
								<view class="center">
									<!-- <eui-card-input class="search-field" v-model="formData.c_no" title="单据号"
										placeholder="请输入单据号" type="text" /> -->
									<eui-card-input class="search-field" v-model="formData.c_status" title="费用状态"
										type="radio" :range="getDictSelectList('是否有效')" />
							<!-- 		<eui-card-input class="search-field" v-model="formData.c_mk_dt_s" title="开始日期"
										placeholder="请选择开始日期" type="date" :displayable="false" rightIconType="clear"
										@iconClick="clear" singleTag="c_mk_dt_s" />
									<eui-card-input class="search-field" v-model="formData.c_mk_dt_e" title="结束日期"
										placeholder="请选择结束日期" type="date" :displayable="false" rightIconType="clear"
										@iconClick="clear" singleTag="c_mk_dt_e" /> -->

								</view>
								<view class="bottom flex-1 flex">
									<eui-button type="max2" title="重置" singleTag="reset"
										@buttonClick="confirm"></eui-button>
									<eui-button type="max" title="确认" singleTag="fix"
										@buttonClick="confirm"></eui-button>
								</view>
							</view>
						</template>
					</eui-search-bar>
				</view>
			</view>
		</template>
		<!-- <eui-page-content> -->
			<view class="footer-view">
				<eui-virtual-list @onRefresh="getData" @lower="templateLower" refresher="true" isBottom="true"
					@itemClick="templateClick" :origList="dataList" :options="dataOptions"  type="list" :showHeard="false">
					<template v-slot:bottom="scope">
						<view>
							<eui-button :modelValue="scope" type="min" title="编辑" 
							@buttonClick="editClick" />
						</view>
					</template>
				</eui-virtual-list>
			</view>
	<!-- 	</eui-page-content> -->
	</eui-page-frame>
</template>

<script setup type="ts">
	import { ref, reactive, onMounted } from 'vue';
	import {useMainStore} from "@/store/modules/store";
	import {useLoginStore} from "@/store/modules/useLoginStore";
	import { validateStores } from '@/hooks/useValidateMethod';
	import dateRangUtil from '../../../common/dateRangUtil';
	import { getRelatedName, getDictName,getDictSelectList, getDictSelect } from '../components/RelatedName.js';
	import Enjoy from "@/common/enjoy";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	import { init } from '@/hooks/init';
	import useService from '@/hooks/useService';
	const service = useService({ prefix: "bcApi" });
	
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const EuiNavBar = ref(null);
	const RdsSearchBar = ref(null);
	const { loginInfo } = mainStore;
	const searchText = ref('');
	const sUserStore = ref('');
	const sUserStoreName = ref('');
	const sUser = ref('');
	
	const nbOption = ref({
	  items: [
	    {title: '新增', onClick: 'onClickNewCount', icon: 'plusempty'},
	  ]
	})
	const formData = ref({
	   // c_mk_dt_s: (dateRangUtil.getLast1Month())[0],
	   // c_mk_dt_e: (dateRangUtil.getLast1Month())[2],
	   // c_no: '',
	   c_status: '',

	})
	const dataList = ref([]);
	const CurrentPage = ref(1);  //第几页
	const PageSize = ref(10);  //每页10条
	const RowsCount = ref(0);  //总条数
	const PageCount = ref(1);  //总页数
	
	const dataOptions = ref([
		{ label:"费用编码", name:"c_no" },
		{ label: "费用名称", name: "c_name" },
		{ label: "费用总额", name: "c_amount" },
		{ label: "发票代开费率(%)", name: "c_inv_fee_rate" },
		{ label: "费用状态", name: "c_status_name" },
		{ label: "费用说明", name: "c_desc",occupy: true },
	])
	
	const clear = (e)=>{
		switch (e) {
			case 'c_mk_dt_s':
			  formData.value.c_mk_dt_s = '';
			  break;
			case 'c_mk_dt_e':
			  formData.value.c_mk_dt_e = '';
			  break;
		}
	}
	const confirm = async(t) => {
	  let { singleTag } = t;
	  switch (singleTag) {
	    case 'reset':
	    //    formData.value.c_mk_dt_s = (dateRangUtil.getLast1Month())[0];
	    //    formData.value.c_mk_dt_e = (dateRangUtil.getLast1Month())[2];
		   // formData.value.c_no = '';
		   formData.value.c_status = '';
	      break;
	    case 'fix':
	      // 关闭弹出层
	      RdsSearchBar.value.closeDrawer();
		  await getData();
	      break;
	  }
	}
	const setDefault = () => {
		sUserStore.value = loginInfo.sUserStore;
		sUserStoreName.value = loginInfo.sUserStoreName;
		sUser.value = loginInfo.sUser;
	}
	onShow(async () => {
	  await init()
	  if (!loginInfo.sUserStore) {
	    EuiNavBar.value.onClickStore();
	    return;
	  }
	  setDefault();
	  await getData();
	})
	const searchConfirm = async (e) => {
	  if (!e) {
	    return;
	  }
	  searchText.value = e.value;
	  await getData();
	}
	const getData = async(e) => {
		if (!e) {
			CurrentPage.value = 1;
		}
		const req = {
			IsNotPage: false,
			CurrentPage: CurrentPage.value,
			PageSize: PageSize.value,
			UserNo: loginInfo.sUser,
			WhereList: [
				// { c_col: "c_dc_store_id", c_oper: "等于", c_value: this.sUserStore, c_logic: "而且" },
				// this.formData.c_status ? { c_col: "c_status", c_oper: "等于", c_value: this.formData.c_status, c_logic: "而且" } : {},
				formData.value.c_status ? { c_col: "c_status", c_oper: "等于", c_value: formData.value.c_status, c_logic: "而且" } : {},
			]
		}
		if (searchText.value) {
			req.WhereList.push({
				c_col: "c_no",
				c_oper: "等于",
				c_value: searchText.value,
				c_logic: "而且",
			});
		} 
		uni.showLoading({ title: "正在加载...", mask: true })
		const result = await service.request('采购费用方案维护', 'EnjoyQueryList', req,'');
		uni.hideLoading(); 

		CurrentPage.value = result.CurrentPage; //第几页
		PageSize.value = result.PageSize; //每页10条
		RowsCount.value = result.RowsCount; //总条数
		PageCount.value = result.PageCount; //总页数
		const _data = result.ReturnObject.map(x=>{
			return {
				...x,
				c_amount:x.c_amount.toFixed(2),
				c_status_name:getDictName('是否有效',x.c_status),
			}
		})
		if (result.CurrentPage == 1) {
			dataList.value = _data;
		} else {
			dataList.value = dataList.value.concat(_data);
		}
	}
	
	const templateClick = async(e)=> {
		uni.navigateTo({
			url: './edit?c_no=' + e.item.c_no + '&storeId=' + sUserStore.value
		});
    }
	// 新增单据
	const onClickMenuFunc = (e) => {
	  console.log('=====onClickMenuFunc: ', e);
	  switch (e) {
	    case 'onClickNewCount':
	      setTimeout(() => {
	        EuiNavBar.value.closeDrawer();
	      },1200);
	      uni.navigateTo({
	        url: './edit?storeId=' + sUserStore.value
	      });
	      break;
	  }
	}
	const onClickNewCount = (e)=> {
		RdsNavBar.value.close('bottom');
		uni.navigateTo({
			url: './edit?storeId=' + sUserStore.value
		});
	}
	// 上拉加载更多
	const templateLower = async()=> {
		if (CurrentPage.value < PageCount.value) {
			CurrentPage.value = CurrentPage.value + 1;
			await getData(true);
		}
	}
	const editClick = (v) => {
		uni.navigateTo({
		    url: './edit?c_no=' + v.modelValue.c_no
		});
	}
</script>

<style lang="scss" scoped>
	@import '../../../main.scss';

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #F2F2F2;
		padding: 0px !important
	}

	.content-img {
		background-color: #FFFFFF;
		background-size: 100% 176rpx;
		background-repeat: no-repeat;
		width: 100%;
	}

	.navigation {
		flex: 0 0 auto;
		margin-bottom: 5px;
	}

	.top-view {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
	}
	.search-fields {
		width: 100%;
		background: #FFFFFF;
		position: relative;
	
		.bottom {
			background: #ffffff;
			border-top: 1rpx solid $uni-line-color;
			display: flex;
			justify-content: center;
			padding: 20rpx;
		}
	}
	.footer-view{
		height:100%;
		background: $uni-bg-color;
	}
	::v-deep .white-main{
		left:0;
		right:0;
	}
</style>